<template>
  <el-container>
    <el-header height="80px"><navbar></navbar></el-header>
    <el-main class="regist-box">
      <el-row>
        <el-col :span="13" class="content-bg">
          <regist v-if="status == 'regist'"></regist>
          <login v-if="status == 'login'"></login>
        </el-col>
        <el-col :span="11" class="txt-content">
          <div class="txt-content-box" v-if="status == 'regist'">
            <div class="t1">{{$t('regist.t3')}}</div>
            <div class="t2 hide">{{$t('regist.t4')}}</div>
            <router-link to="/member/login" class="txt-btn">{{$t('regist.t5')}}</router-link>
          </div>
          <div class="txt-content-box" v-if="status == 'login'">
            <div class="t1">{{$t('login.t3')}}</div>
            <div class="t2">{{$t('login.t4')}}</div>
            <router-link to="/member/regist" class="txt-btn">Join now!</router-link>
          </div>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import Navbar from '../../layout/components_c/Navbar.vue'
import regist from './component/regist.vue'
import login from './component/login.vue'

export default {
  name: 'dashboard',
  components: { Navbar, regist, login },
  data() {
    return {
      status: this.$route.params.status
    }
  },
  watch: {
    "$route": function(a){
      this.status = a.params.status
    }
  },
   methods: {
  },
  created() {
  }
}
</script>

<style  scoped>
  .el-row {
    width: 100%;
    height: 100%;
  }
  .regist-box {
    width: 1180px;
    height: 610px;
    background: #F7F7F7;
    -webkit-box-shadow: 0 2px 9px 0 rgba(0,0,0,0.3);
    box-shadow: 0 2px 9px 0 rgba(0,0,0,0.3);
    margin: 46px auto;
  }
  .content-bg {
    padding: 89px 110px;
    height: 100%;
  }

  .txt-content {
    height: 100%;
    background: url("../../../assets/regist-bg.png") no-repeat center;
    background-size: cover;
  }
  .txt-content .t1 {
    font-size: 30px;
    color: #ffffff;
    line-height: 44px;
  }
  .txt-content .t2 {
    font-size: 14px;
    color: #ffffff;
    line-height: 30px;
  }
  .txt-content-box {
    padding: 140px 100px;
  }
  .txt-btn {
    display: block;
    margin-top: 20px;
    width: 114px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    border-radius: 4px;
    border: 2px solid #FFFFFF;
    font-size: 14px;
    color: #ffffff;
  }

</style>
<style type="text/css">
</style>
